import styles from "@/styles/Datasets.module.css";
import { Image } from "antd";
import { Tag } from "antd";
import { DataRecord } from "@prisma/client";

function ImageWall({ records }: { records: DataRecord[] }) {
  return (
    <div className={styles.imageWall}>
      {records.map((item) => {
        return <RecordCard key={String(item.id)} record={item}></RecordCard>;
      })}
    </div>
  );
}

function RecordCard({ record }: { record: DataRecord }) {
  return (
    <div className={styles.card}>
      <div className={styles.cardTitle}>{record.name}</div>
      <Image
        className={styles.cardImage}
        width={200}
        height={120}
        src={`/api/image/${record.name}`}
        alt={"样本图片"}
      />
      <div className={styles.cardFooter}>
        <div className={styles.cardFooterItem}>
          云雾
          <Tag color="cyan" style={{ marginInlineEnd: 0 }}>
            {record.gaussian}
          </Tag>
        </div>
        <div className={styles.cardFooterItem}>
          高斯噪声
          <Tag color="cyan" style={{ marginInlineEnd: 0 }}>
            {record.gaussian}
          </Tag>
        </div>
        <div className={styles.cardFooterItem}>
          白噪声
          <Tag color="cyan" style={{ marginInlineEnd: 0 }}>
            {record.white}
          </Tag>
        </div>
      </div>
    </div>
  );
}

export default ImageWall;
